<template>
	<view class="goshop-ship-container">
		<u-toast ref="uToast"></u-toast>
		<view class="goshop-ship-head-wrap">
			<view class="goshop-ship-head-box">
				<view class="goshop-ship-head">
					<view class="goshop-ship-head-top font-bold">{{goodsshippedText}}</view>
					<view class="goshop-ship-head-bottom">
						<view class="goshop-ship-head-bottom-left"><image class="goshop-img-62" :src="orderData.goodInfo.thumbnail"></image></view>
						<view class="goshop-ship-head-bottom-center">
							<view>{{orderData.goodInfo.name}}</view>
						</view>
						<view class="goshop-ship-head-bottom-right">
							<view>{{moneyText}}{{orderData.goodInfo.price}}</view>
							<view>x{{orderData.orderGoodInfo.goodQuantity}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goshop-ship-body-wrap">
			<view class="goshop-ship-body-box"> 
				<view class="goshop-list-wrap">
					<view class="goshop-list-item goshop-list-item-bottom" @tap="showShip = true">
						<view class="goshop-list-item-left">
							{{shippingtypeText}}
						</view>
						<view class="goshop-list-item-right">
							<view class="text-color-three">{{typeName?typeName:chooseText}}</view>
							<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
						</view>
					</view>
				</view>
				<view class="goshop-ship-express-box" v-if="form.type">
					<view class="goshop-ship-express-item goshop-ship-express-item-bottom" v-if="form.type === 1">
						<view>{{couriercompanyText}}</view>
						<u--input
						    :placeholder="fillcouriercompanyText"
						    border="none"
							v-model="form.company"
							class="u-m-t-10"
						  ></u--input>
					</view>
					<view class="goshop-ship-express-item goshop-ship-express-item-bottom" v-if="form.type === 1">
						<view>{{trackingnumberText}}</view>
						<u--input
						    :placeholder="filltrackingnumberText"
						    border="none"
							v-model="form.number"
							class="u-m-t-10"
						  ></u--input>
					</view>
					<view class="goshop-ship-express-item" v-if="form.type === 2">
						<view>{{shippingcontentsText}}</view>
						<u--textarea class="u-m-t-10" v-model="form.content" confirmType="done" :placeholder="fillshippingcontentsText" count></u--textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="goshop-ship-footer-wrap">
			<view class="goshop-ship-footer">
				<u-button :text="confirmdeliveryText" @click="submitForm()" type="error"></u-button>
			</view>
		</view>
		<u-action-sheet :actions="shipDataList" @close="selectShipClose" :title="shipTitle" @select="selectShipClick" :show="showShip" :closeOnClickOverlay="true" :closeOnClickAction="true" ></u-action-sheet>
	</view>
</template>

<script>
	import {orderShip,orderInfo} from '@/common/http.api.js'
	export default {
		data() {
			return {
				moneyText:'',
				showShip:false,
				shipTitle:'',
				shipDataList:[
					{name:'',type:1},
					{name:'',type:2}
				],
				orderData:{
					goodInfo:{
						thumbnail:null,
					},
					orderGoodInfo:{
						goodQuantity:null,
					}
				},
				typeName:'',
				form:{
					orderId:null,
					type:null,
					company:null,
					number:null,
					content:'',
				},
				trackingnumberText:'',
				fillshippingcontentsText:'',
				goodsshippedText:'',
				couriercompanyText:'',
				shippingtypeText:'',
				shippingcontentsText:'',
				confirmdeliveryText:'',
				shippedsuccessfullyText:'',
				filltrackingnumberText:'',
				fillcouriercompanyText:'',
				chooseText:'',
				deletesuccessText:'',
			};
		},
		async onLoad(e){
			this.form.orderId = e.id;
			await this.getOrderInfo();
		},
		onShow(){
		   this.refresh();	
		},
		methods:{
			refresh(){
				this.moneyText = this.$t('common.money.text');
				this.shipDataList[1].name = this.$t('sihp.withoutlogistics.text');
				this.shipDataList[0].name = this.$t('sihp.logisticsdelivery.text');
			    this.shipTitle = this.$t('sihp.selectshippingtype.text');
				this.trackingnumberText = this.$t('sihp.trackingnumber.text');
				this.fillshippingcontentsText = this.$t('sihp.fillshippingcontents.text');
				this.goodsshippedText = this.$t('sihp.goodsshipped.text');
				this.couriercompanyText = this.$t('sihp.couriercompany.text');
				this.shippingtypeText = this.$t('sihp.shippingtype.text');
				this.shippingcontentsText = this.$t('sihp.shippingcontents.text');
				this.confirmdeliveryText = this.$t('sihp.confirmdelivery.text');
				this.shippedsuccessfullyText = this.$t('sihp.shippedsuccessfully.text');
				this.filltrackingnumberText = this.$t('sihp.filltrackingnumber.text');
				this.fillcouriercompanyText = this.$t('sihp.fillcouriercompany.text');
				this.chooseText = this.$t('common.choose.text');
				this.deletesuccessText = this.$t('common.deletesuccess.text');
			},
			submitForm(){
				let that = this;
				orderShip(this.form).then(res => {
					if (res.code === 0) {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.shippedsuccessfullyText,
							type: 'success',
						})
						uni.navigateBack({
							delta:1
						})
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			selectShipClose(){
				this.showShip = false;
			},
			selectShipClick(index){
				this.form.type = index.type;
				this.typeName = index.name;
			},
			getOrderInfo(){
				orderInfo({params:{id:this.form.orderId}}).then(res => {
					if (res.code === 0) {
						this.orderData = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			doOrderShip(){
				orderShip(this.form).then(res => {
					if (res.code === 0) {
						this.$refs.uToast.show({
							message: that.deletesuccessText,
							type: 'success',
						})
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;;
}
.goshop-list-item-right{
	align-items: center;
	display: flex;
}
/deep/.goshop-list-wrap .goshop-list-item-bottom{
	border-bottom:none;
}
.goshop-list-item-left{
	display: flex;
	align-items: center;
}
.goshop-ship-express-item-bottom{
	border-bottom: 2rpx solid $goshop-text-color-three;
}
.goshop-ship-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.goshop-ship-head-wrap{
		width: 100%;
		.goshop-ship-head-box{
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			.goshop-ship-head{
				background-color: $goshop-color-auxiliary-one;
				border-radius: 20rpx;
				padding: 20rpx;
				.goshop-ship-head-top{
					margin-bottom: 20rpx;
				}
				.goshop-ship-head-bottom{
					display: flex;
					justify-content: space-between;
					.goshop-ship-head-bottom-left{
						margin-right: 20rpx;
					}
					.goshop-ship-head-bottom-center{
						flex: 3;
					}
					.goshop-ship-head-bottom-right{
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
					}
				}
			}
		}
	}
	.goshop-ship-body-wrap{
		width: 100%;
		.goshop-ship-body-box{
			padding: 10rpx;
			.goshop-list-wrap{
				border-radius: 20rpx;
			}
		}
		.goshop-ship-express-box{
			background-color: $goshop-color-auxiliary-one;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			.goshop-ship-express-item{
				margin-bottom: 20rpx;
			}
		}
	}
	.goshop-ship-footer-wrap{
		width: 100%;
		.goshop-ship-footer{
			padding: 20rpx;
		}
	}
}
</style>
